<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像组件 - emit方法</title>
</head>

<body>
    <dd>
        <dl>1、可在输入框中输入图片地址</dl>
        <dl>2、可通过按钮选中图片，并将本地图片链接展示在输入框</dl>
    </dd>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
        <div class="father">
            <my-img mark="headers" @custom-change="add"></my-img>
            拿到的值：
            <dl>
                <dt>原始对象</dt>
                <dd>{{img.headers}}</dd>
                <dt>图片链接</dt>
                <dd></dd>
                <dt>图片名</dt>
                <dd></dd>
            </dl>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>


            <!--
        <dd>
            <dl>图片链接：{{obj.image.headers.url}}</dl>
            <dl>图片名：{{obj.image.headers.name}}</dl>
            <dl>展示图片：<img :src="obj.image.headers.url" style="
                width: 100px;
                height: 100px;
            " /></dl>
        </dd>
        -->
        </div>
    </div>

    <script>

        const App = Vue.createApp({
            //父组件
            setup() {
                //存储图片链接
                const img = Vue.ref({});

                const add = (a) => {
                    //接收子组件传来的值，将值传入父组件数组

                    img.value[a.mark] = a.url
                    //obj.image[a.mark].name = a.imgValue.imgName,
                    //obj.image[a.mark].name = "默认",
                    //console.log("对象中的名字：", obj.image.headers.imgName)
                    //obj.image[a.mark].name = a.imgValue.value.imgName,

                    //console.log("子组件传出的值：", a.imgValue.imgName)
                    //console.log("父组件接收的值：", obj.image[a.mark].imgName)

                    //console.log("测试下", obj.image[a.mark]["url"] = "11",)
                }
                return {

                    add,
                    img,
                }
            }
        })
        //图片子组件
        //传出选中图像的URL和图片文件名
        const inutvue = {
            /*
            *  mark:标记（必填）-根据标记获取对应图片信息
            *  default：输入框的默认值
            */
            props: {
                mark: {
                    type: String,//类型：字符串
                    required: true,//必填
                },
                default: {
                    type: String,
                    default: "默认值"
                }
            },
            //提前声明要使用的自定义事件
            emits: ['customChange'],
            setup(props, { emit }) {
                //输入框中的值
                let input_default = Vue.ref("")
                //获取传入的mark值，唯一的
                const { mark } = Vue.toRefs(props)
                //存储本地图片的信息
                const imgLocal = Vue.ref({
                    url: "图片链接1111",
                    name: "图片名",
                })
                //选中文件确定后触发此事件
                //获取选中的图片信息
                const getFiles = () => {
                    console.log("打印下mark图片", mark.value)
                    const fileObj = document.getElementById(mark.value).files[0];
                    console.log("您选中的文件名：", fileObj.name);
                    console.log("您的图片地址是：", URL.createObjectURL(fileObj))

                    imgLocal.value.url = URL.createObjectURL(fileObj)//图片地址
                    imgLocal.value.name = fileObj.name//文件名

                    //用按钮上传图片，将上传图片的链接替换进输入框中
                    input_default.value = imgLocal.value.url;
                    console.log("使用按钮传值哦")

                }
                //将子组件的值传出
                const handleChange = (event) => {

                    //逻辑判断，先看按钮有没有值，若按钮无值，则使用输入框内的值

                    //待输出到输入框中的值
                    let input_value = Vue.ref();

                    //判断逻辑
                    //观察按钮有没有操作，
                    //有操作，则使用按钮操作后的值覆盖输入框中的值
                    //按钮没有操作，正常使用输入框中的值

                    //默认使用输入框中的值，使用按钮事件替换输入框中的值
                    imgLocal.value.url = input_default.value
                    console.log("使用输入框传值哦")

                    //上传按钮，选中文件后会触发change事件
                    //使用change事件，将图片链接替换

                    //onblur的优先级比较高，可用用气来清理值，重复选中同一张图片也能替换链接

                    //if (!input_default.value) {
                    //    //按钮有值
                    //    //给输入框赋值
                    //    input_default.value = imgLocal.value.url
                    //    console.log("使用按钮传值哦")
                    //} else {
                    //    //按钮无值
                    //    //将输入框中的值输出
                    //    imgLocal.value.url = input_default.value
                    //    console.log("使用输入框传值哦")
                    //}



                    emit("customChange", {
                        //传出图片链接
                        url: input_default,
                        //传出图片名
                        name: imgLocal.value.name,
                        //传出图片表示 
                        mark: props.mark
                    })
                }



                //问题，重复选中一张图片也能完成替换


                return {
                    handleChange,
                    mark,
                    getFiles,
                    imgLocal,
                    input_default,
                };
            },
            template:
                '<div class="child"><input type="text" placeholder ="请输入图片链接或选择图片" v-model="input_default" @input="handleChange" /><input type="file" accept="image/gif, image/jpeg, image/png, image/jpg"  :id=mark @blur="handleBlur"  @change="getFiles()" /><br />我是子组件{{imgLocal}}       </div>',
        };
        App.component("my-img", inutvue);
        App.mount("#app");
    </script>
    <style>
        .father {
            padding: 20px;
            background-color: turquoise;
            border: 1px solid blue;
        }

        .child {
            background-color: blanchedalmond;
            border: 2px solid red;
        }

        img {
            width: 100px;
            height: 100px;
        }
    </style>

</body>

</html>